<style>
    /*.settings > .btn {*/
        /*top: 150px;*/
    /*}*/
    .fa-style-right {
        cursor: pointer;
        font-size: 20px;
        padding-top: 8px;
        margin-right: 10px;
    }
    .fa-style-left {
        cursor: pointer;
        font-size: 20px;
        padding-top: 8px;
    }
    .flow-tree-content {
        height: 400px;
        overflow-y: auto;
    }
    .tree-input {
        width: 200px;
    }
    .helper-container .line {
        height: 30px;
    }
    .relate-bottom {
        padding-top: 5px;
        padding-bottom: 5px;
        border-bottom: 1px solid #edf1f2;
    }
    .relate-bottom span {
        cursor: pointer;
    }
    .isJump {
        color: white;
        background-color: #23b7e5;
    }
    /*.panel-body{*/
        /*padding: 0!important;*/
    /*}*/
    .panel-heading{
        padding:8px 6px;
    }
    .matrix-float-right {
        float: right;
    }
</style>
<m-project-plan select-tab="flow" type="req">
    <div class="wrapper-md bg-white" id="flow-builder-content">
        <div class="row row-sm row-flow">
            <div class="col-xs-6 col-sm-4 col-md-2">
                <div class="col-sm-12 hide" style="padding-bottom: 4px;" ng-hide="info.removeFinished">
                    <i class="fa fa-plus-square-o fa-style-right" popover="新建流程" popover-trigger="mouseenter" ng-show="info.selectedFlow.type == '1'" ng-click="addFlow()"></i>
                    <i class="fa fa-minus-square-o fa-style-right hide" popover="删除流程" popover-trigger="mouseenter" ng-show="info.selectedFlow.type == '2'" ng-click="removeFlow()"></i>
                    <i class="fa fa-copy fa-style-right" popover="复制流程" popover-trigger="mouseenter" ng-show="info.selectedFlow.type == '2'" ng-click="copyFlow()"></i>
                    <i class="fa fa-edit fa-style-right" popover="编辑流程" popover-trigger="mouseenter" ng-show="info.selectedFlow.type == '2'" ng-click="editFlow()"></i>
                    <i class="fa fa-code-fork fa-style-right" popover="拉分支" popover-trigger="mouseenter" ng-show="info.selectedFlow.type == '2' && info.hasRelate == undefined" ng-click="relateFlow()"></i>
                    <i class="fa fa-chain-broken fa-style-right" popover="重置" popover-trigger="mouseenter" ng-show="info.selectedFlow.type == '2' && info.hasRelate != undefined" ng-click="reliveFlow()"></i>
                </div>
                <div class="col-sm-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            改动场景（{{info.reqRelateFlows.length}}个）
                        </div>
                        <div class="panel-body req-relate-flow" ng-if="info.reqRelateFlows.length > 0">
                            <div class="list-group bg-white">
                                <div class="col-sm-12 relate-bottom" ng-repeat="relate in info.reqRelateFlows track by $index" ng-class="info.jumpToFeature == relate.id ? 'isJump' : ''" ng-click="goTo(relate)">
                                <span title="{{relate.name}}" ng-if="relate.name.length > 10">
                                    {{$index+1}}. ...{{relate.name | limitTo: -10 }}
                                </span>
                                    <span title="{{relate.name}}" ng-if="relate.name.length <= 10">
                                    {{$index+1}}. {{relate.name}}
                                </span>
                                    <span class="label bg-success pull-right" ng-if="relate.status == 'ADD'">新增</span>
                                    <span class="label bg-danger pull-right" ng-if="relate.status == 'UPDATE'">修改</span>
                                </div>
                            </div>
                        </div>
                        <div class="panel-body" ng-if="!info.reqRelateFlows.length">
                            暂无数据！
                        </div>
                    </div>
                    <!-- <accordion  close-others="true"> -->
                    <accordion close-others="false">
                        <accordion-group heading="场景架构" is-open="true" ng-hide="true">
                            <div class="col-sm-12 flow-tree-content hide">
                                <abn-tree
                                    tree-data='info.flowTree'
                                    tree-control='info.my_tree'
                                    on-select='my_tree_handler(branch)'
                                    tree-type="flow"
                                    expand-level='3'
                                    icon-leaf='fa fa-file-o'
                                    icon-expand='fa fa-plus'
                                    icon-collapse='fa fa-minus'>
                                </abn-tree>
                            </div>
                        </accordion-group>

                        <accordion-group ng-if="info.reqNodeFlows.length > 0" heading="影响流程（{{info.reqNodeFlows.length}}个）" is-open="true">
                            <div class="col-sm-12 relate-bottom" ng-repeat="relate in info.reqNodeFlows" ng-class="info.jumpToFeature == relate.id ? 'isJump' : ''" ng-click="goTo(relate)">
                                <span title="{{relate.name}}" ng-if="relate.name.length > 10">
                                    {{$index+1}}. ...{{relate.name | limitTo: -10 }}
                                </span>
                                <span title="{{relate.name}}" ng-if="relate.name.length <= 10">
                                    {{$index+1}}. {{relate.name}}
                                </span>
                                <span class="label bg-warning pull-right" ng-if="relate.status == 'NODE_UPDATE'">节点改动</span>
                            </div>
                        </accordion-group>
                        <accordion-group heading="节点内容" is-open="false" ng-hide="true">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">名称：</label>
                                    <div class="col-sm-8">{{ info.diagramSelected.name || "空" }}</div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">类型：</label>
                                    <div class="col-sm-7">{{ info.diagramSelected.category == 'Feature' ? "功能点" : (info.diagramSelected.category == 'SubFlow' ? "流程" : "空")}}</div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">架构：</label>
                                    <div class="col-sm-8" title="{{ info.diagramSelected.path }}">{{ info.diagramSelected.path || "空" }}</div>
                                </div>
                            </div>
                            <div class="col-sm-12" style="margin-bottom: 5px;">
                                <button class="col-sm-12 btn btn-default" ng-IF="info.diagramSelected.name && info.diagramSelected.isRelate != 'isRelate' && info.diagramSelected.category == 'Feature'" ng-click="nodeClick()">拉分支</button>
                            </div>
                        </accordion-group>
                    </accordion>
                </div>
            </div>
        
            <div class="col-xs-6 col-sm-8 col-md-10" ng-if="info.selectedFlow.type != '2'">
                <winit-flow-map ng-if="info.selectedFlow.type != '2'"
                                datas="info.flowData" 
                                diagram-scope="info.diagramScope" 
                                req-flows="info.reqFlows"
                                is-req-flow="true"
                                blur="getNodeDetails(data)" 
                                add-req-frame-fun="addFrame(data)"
                                add-req-flow-fun="addFlow(data)"
                                copy-flow-fun="copyFlow(data)"
                                edit-flow-fun="editFlow(data)"
                                relate-flow-fun="relateFlow(data)"
                                relive-flow-fun="reliveFlow(data)"
                                remove-flow-fun="removeFlow(data)">
                </winit-flow-map>
            </div>
            <div class="col-xs-6 col-sm-8 col-md-10" ng-if="info.selectedFlow.type == '2'">
                <div class="col-sm-12" style="margin-bottom: 10px;" ng-hide="info.isDisabled">
                    <div class="col-sm-2">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="请输入查询节点..." ng-model="info.input" ng-disabled="info.isDisabled" style="height: 36px;" ng-keyup="myKeyup($event)">
                            <span class="input-group-addon" title="查询" ng-click="searchNode()">
                                <i class="fa fa-search"></i>
                            </span>
                        </div>  
                    </div>
                    <div class="col-sm-10" style=" padding-top: 8px;">
                        <label class="checkbox-inline matrix-float-right">
                            <input type="radio" name="status" value="compare" ng-model="info.viewStatus" ng-disabled="info.isDisabled" ng-click="clickStatus('compare')"> 对比
                        </label>
                        <label class="checkbox-inline matrix-float-right">
                            <input type="radio" name="status" value="online" ng-model="info.viewStatus" ng-disabled="info.isDisabled" ng-click="clickStatus('online')"> 线上
                        </label>
                        <label class="checkbox-inline matrix-float-right">
                            <input type="radio" name="status" value="current" ng-model="info.viewStatus" ng-disabled="info.isDisabled" ng-click="clickStatus('current')"> 当前
                        </label>
                    </div>
                </div>
                <br/>
                <br/>
                <!-- 流程组件 -->
                <winit-flow-builder ng-if="showFlowBuilder && info.currentDiagram" 
                                    diagram-id="{{info.selectedFlow.id}}r" 
                                    datas="info.reqFlowDatas" 
                                    params-type="current"
                                    reload-flow-fun="getReqFlows()"
                                    diagram-scope="info.diagramScope" 
                                    is-show-version="true"
                                    version="info.nameAndVersion"
                                    is-readonly="info.diagramStatus == 'compare'"
                                    is-fixed-height="info.diagramStatus == 'compare'"
                                    click-fun="addFeatureOrFlow(data)"
                                    blur="getNodeDetails(data)">
                </winit-flow-builder>
                <winit-flow-builder ng-if="showFlowBuilder && info.masterDiagram"
                                    diagram-id="{{info.selectedFlow.id}}m" 
                                    datas="info.masterFlowDatas" 
                                    params-type="compare"
                                    diagram-scope="info.diagramScope" 
                                    is-readonly="true"
                                    is-show-version="true"
                                    version="info.nameAndVersion"
                                    is-fixed-height="info.diagramStatus == 'compare'"
                                    click-fun="addFeatureOrFlow(data)">
                </winit-flow-builder>
                <!-- <go-diagram click-fun="clickFun(data)" flow-details="info.flowNodeDetails" ng-show="info.currentDiagram" show-legend="info.currentDiagram == info.masterDiagram" flow-version="info.nameAndVersion" go-model="info.model" pa-model="info.paModel" diagram="info.diagram" m-diagram="info.mDiagram" req-id="info.currentReqId" style="border: solid 1px #cfdadd; margin-bottom: 5px;"></go-diagram> -->
                <!-- <compare-diagram ng-show="info.masterDiagram" flow-version="info.nameAndVersion" go-model="info.modelMaster" pa-model="info.paModelMaster" diagram="info.diagramMaster" m-diagram="info.mDiagramMaster" style="border: solid 1px #cfdadd; margin-bottom: 5px;"></compare-diagram> -->
            </div>
        </div>
        <div ng-show="isUserCanOperateByRole()">{{info.model.selectedFlowData}}</div>
    </div>
</m-project-plan>
<winit-settings btn-list="settings.btnEle"></winit-settings>